<template>
  <div class="home">
    <el-container>
      <el-header height="80px" style="background-color: white">
        <div style="width: 1200px; margin: 0 auto;">
          <el-row :gutter="20">
            <el-col :span="6">
              <a href="/">
                <img src="/imgs/icon.png" width="200">
              </a>
            </el-col>
            <el-col :span="10">
              <el-menu mode="horizontal" active-text-color="orange">
                <el-menu-item index="1">首页</el-menu-item>
                <el-menu-item index="2">食谱</el-menu-item>
                <el-menu-item index="3">视频</el-menu-item>
                <el-menu-item index="4">资讯</el-menu-item>
              </el-menu>
            </el-col>
            <el-col :span="6">
              <el-input style="position: relative; top:20px" placeholder="请输入搜索关键字" >
                <el-button slot="append" @click="search()"
                           icon="el-icon-search"></el-button>
              </el-input>
            </el-col>
            <el-col :span="2">
              <el-popover
                  placement="top-start"
                  title="  欢迎来到烘焙坊"
                  width="200"
                  trigger="hover">
                <i style="font-size:30px; position:relative;top:25px"
                    slot="reference" class="el-icon-user"></i>
                <el-button type="info" @click="reg()">注册</el-button>
                <el-button type="warning" @click="login()">登录</el-button>
              </el-popover>
            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
      <el-footer style ="background-color:black; height:280px;padding:50px 0">
        <div style="width: 1200px; margin: 0 auto;text-align: center; color: #666">
          <el-row>
            <el-col :span="8">
              <img src="/imgs/icon.png" >
              <p>Copyright © 2025 烘焙坊</p>
              <p>Powered by 光胜烘焙坊</p>
              <p>Contact Us: 18285998947</p>
            </el-col>
            <el-col :span="8">
              <el-row id="footer_center">
                <el-col :span="8">
                  <h3>关于我们</h3>
                  <p>烘焙学院</p>
                  <p>烘焙食谱</p>
                  <p>分类信息</p>
                  <p>求职招聘</p>
                  <p>社区交流</p>
                </el-col>
                <el-col :span="8">
                  <h3>服务与支持</h3>
                  <p>联系我们</p>
                  <p>广告投放</p>
                  <p>用户协议</p>
                  <p>友情链接</p>
                  <p>在线反馈</p>
                  <p>我发投稿</p>
                </el-col>
                <el-col :span="8">
                  <h3>底部导航</h3>
                  <p>Archiver</p>
                  <p>手机版</p>
                  <p>小黑屋</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <p style="font-size:60px;margin: 0">
                <span style="color: orange">烘焙</span>坊
              </p>
              <p>烘焙行业社区平台</p>
            </el-col>
          </el-row>
        </div>
      </el-footer>
    </el-container>
    </div>
</template>

<script>

export default {
  name: 'HomeView',
  methods: {
    search(){
      // if (this.$route.path!='/list'){
      //   //从A push到 B  点击后退可以回到A
      //   this.$router.push('/list');
      // }
      //从A replace到B  点击后退回不到A      A push 到B replace 到C
      this.$router.replace('/list');
    },
    reg() {
      //location.href="/reg";导致页面刷新，浪费资源
      if(this.$route.path!="/reg"){
        this.$router.push("/reg");//脚手架开发中使用这种跳转方式
      }
    },
    login() {
      //location.href="/login";
      if( this.$route.path!="/login"){
        this.$router.push("/login");
      }
    }
  },
}
</script>

<style>
#footer_center p{
  margin: 0;
}
#footer_center h3{
  color: white;
}
</style>
